<template>
	<view class="content">
		<view class="search">
			<!-- <view class="search-box">
				<image src="/static/icon/shop/search.png"></image>
				<text>搜索</text>
			</view> -->
			<input class="uni-input" focus confirm-type="search" placeholder="搜素" />
		</view>
		<view class="main">
			<view class="tabs">
				<view v-for="(item, i) in state.typeLists" :class="['item', state.index == item.type_id ? 'item-tag' : '']"
					@click="chooseTab(item.type_id)">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="tabs-main">
				<view v-for="(item, i) in state.typeLists" :class="[state.index == item.type_id ? 'main-item' : '']"
					v-show="state.index == item.type_id">
					<!-- {{ item.name }} -->
					<view class="item" v-for="(g, i) in state.goods" @click="to_detail(g.gid)">
						<image class="shop-img" :src='g.img_s[0].url'></image>
						<view class="tag">
							<text class="title">{{ g.title }}</text>
							<view class="desc-text">
								<text class="desc">
									已售{{ g.sales }}份
								</text>
								<text class="price">
									<text>￥</text>{{ g.nprice }}
								</text>
							</view>
							<view class="pay">
								<text>查看详情</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	reactive,
	ref
} from "vue";
import { getGoodsTypeLists, getGoodsByTypeId } from '../../../network/shop'
const state = reactive({
	typeLists: [],
	index: 0,
	goods: []
})
const chooseTab = (index) => {
	state.index = index;
	// console.log(state.index);
	getGoodsByTypeId({ type_id: index }).then((res) => {
		state.goods = res.data;
	})
}

// 接收传值
uni.$on('state', function (e) {
	// console.log(e.index);
	state.index = e.index;
})

getGoodsTypeLists().then((e) => {
	state.typeLists = e.data;
	// 默认显示第一个分类的内容
	state.index = e.data[0].type_id;
	getGoodsByTypeId({ type_id: e.data[0].type_id }).then((res) => {
		state.goods = res.data;
	})
})
// 跳转到商品详情页面
const to_detail = (gid) => {
	uni.navigateTo({
		url: '/pages/tabbar/shop/detail?gid=' + gid,
	});
}

</script>

<style lang="scss" scoped>
$boxBorder: solid 1px rgb(112, 112, 112, 0.2);

.content {
	// padding: 10rpx;
	background-color: #fdf4ed;
	width: 100%;
	height: calc(100vh);
	position: relative;

	.main {
		display: flex;

		.tabs-main {
			display: grid;

			.main-item {
				width: 100%;
				height: 240rpx;

				.item {
					display: grid;
					grid-template-columns: 200rpx, 1fr;
					grid-auto-flow: column;
					grid-template-rows: 240rpx;
					place-content: center;
					background-color: #ffffff;
					border-bottom: $boxBorder ;

					.shop-img {
						width: 180rpx;
						height: 200rpx;
						place-self: center;
					}

					.tag {
						margin-top: 10rpx;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-template-rows: repeat(2, 1fr);
						grid-auto-flow: column;

						.title {
							padding-right: 12rpx;
							grid-column: 1/span 2;
							font-size: small;
						}

						.desc-text {
							display: grid;

							.desc {
								color: #c2c2c2;
								font-size: xx-small;
							}

							.price {
								color: red;

								text {
									font-size: smaller;
								}
							}
						}

						.pay {
							width: 200rpx;
							height: 60rpx;
							place-self: center;
							// background-color: #fbd561;

							text {
								line-height: 60rpx;
								text-align: center;
							}
						}
					}
				}

			}
		}

		.tabs {
			display: grid;

			.item {
				width: 200rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				// background: #ffffff;
				border-bottom: $boxBorder;
			}

			.item-tag {
				color: #fbd561;
				border-left: solid 3px #fbd561;
				background: #ffffff;
			}
		}

	}

	.search {
		width: 100%;
		height: 60rpx;
		background-color: #fbd561;
		padding: 10rpx 2.5%;
		// .search-box{
		// 	display: flex;
		// 	position: absolute;
		// 	left: 45%;
		// 	top: 15rpx;
		// 	place-items: center;
		// 	image{
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 	}
		// 	text{
		// 		font-size: smaller;
		// 	}
		// }

		input {
			width: 95%;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 50rpx;
			text-align: center;
			font-size: smaller;
		}
	}
}
</style>
